<?xml version='1.0' encoding='UTF-8' ?>
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:p="http://primefaces.org/ui"
	xmlns:f="http://java.sun.com/jsf/core"
	template="/pages/templates/template.xhtml">
	<ui:define name="metadata">
		<f:metadata>
			<f:viewParam name="id" value="#{GrupoProfessoresBean.id}" />
			<f:event type="preRenderView" listener="#{GrupoProfessoresBean.init}" />
		</f:metadata>
	</ui:define>
	<ui:define name="content">
		<h:form id="formGrupo">
			<div>
				<div class="div-titulo-tela">
					<p:outputLabel styleClass="titulo-tela">Grupo de Trabalho</p:outputLabel>
					<br /> <br />
					<p:separator></p:separator>
					<div class="div-titulo-botoes">
						<p:commandButton value="Lista"
							actionListener="#{GrupoProfessoresBean.doListar}" />

						<p:commandButton id="btnSalvar" value="Salvar" ajax="true"
							update="formGrupo"
							actionListener="#{GrupoProfessoresBean.doSalvar}" />

						<p:commandButton id="btnConcluir" value="Concluir" ajax="true"
							update="formGrupo"
							actionListener="#{GrupoProfessoresBean.doConcluir}" />

					</div>
					<p:separator></p:separator>
					<div class="div-titulo-botoes">

						<p:commandButton value="Geral" ajax="true" update="formGrupo"
							actionListener="#{GrupoProfessoresBean.doGeral}" />

						<p:commandButton value="Areas de Interesse" ajax="true"
							update="formGrupo"
							actionListener="#{GrupoProfessoresBean.doSelecionarAreas}" />

						<p:commandButton value="Participantes" ajax="true"
							disabled="#{!GrupoProfessoresBean.podeParticipantes}"
							update="formGrupo"
							actionListener="#{GrupoProfessoresBean.doSelecionarParticipantes}" />

						<p:commandButton value="Avaliadores" ajax="true"
							disabled="#{!GrupoProfessoresBean.podeAvaliadores}"
							update="formGrupo"
							actionListener="#{GrupoProfessoresBean.doSelecionarAvaliadores}" />
					</div>
				</div>
				<div>
					<div class="div-corpo-tela">
						<div class="div-mensagem">
							<p:messages id="messages" autoUpdate="true" closable="true" />
						</div>

						<p:outputPanel styleClass="tabProfessores">
							<p:outputPanel id="pnlProfPretendidoSelecionados"
								styleClass="pnlPretendidoSelecionados">
								<p:dataTable controlsLocation="right" id="lstProfessores"
									emptyMessage="" value="#{GrupoProfessoresBean.professores}"
									var="profPretendido" styleClass="tabela">
									<f:facet name="header">Professores Selecionados</f:facet>

									<p:column style="width:75%;" headerText="Nome">  
            								#{profPretendido.professor.nome}
        								</p:column>
									<p:column style="width:15%;" headerText="Contatado">  
            								#{profPretendido.contatadoDesc}
        								</p:column>
									<p:column style="width:10%">
										<p:commandButton icon="ui-icon-close"
											actionListener="#{GrupoProfessoresBean.removeProfessor(profPretendido)}"
											update="lstProfessores">
										</p:commandButton>
									</p:column>
								</p:dataTable>
							</p:outputPanel>
						</p:outputPanel>

						<p:panel header="Professores Disponíveis"
							style="width:98%; float:left; position:relative; margin-top:10px;">

							<p:panel style="width:40%; float:left; position:relative;">
								<p:dataTable id="lstProfessoresDisponiveis" var="prof"
									selectionMode="single" rowKey="#{prof.matricula}"
									paginator="true" rows="10"
									selection="#{GrupoProfessoresBean.professorSelecionado}"
									value="#{GrupoProfessoresBean.professoresDisponiveis}">

									<p:ajax event="rowSelect"
										listener="#{GrupoProfessoresBean.onProfessorRowSelect}"
										update=":formGrupo:infoProfessor" />

									<p:ajax event="rowUnselect"
										listener="#{GrupoProfessoresBean.onProfessorRowUnselect}"
										update=":formGrupo:infoProfessor" />

									<p:column sortBy="#{prof.nome}" headerText="Nome">
										<h:outputText value="#{prof.nome}" />
									</p:column>
								</p:dataTable>
							</p:panel>

							<!-- INFORMAÇÕES DO PROFESSOR SELECIONADO -->
							<p:panel id="infoProfessor" header="Professor"
								style="width:40%; float:right; position:relative;">
								<p:outputLabel
									rendered="#{GrupoProfessoresBean.professorSelecionado == null}">Informações do professor selecionado</p:outputLabel>
								<p:panel header="Indicar contado"
									rendered="#{GrupoProfessoresBean.professorSelecionado != null}">
									<p:outputLabel styleClass="label"
										rendered="#{GrupoProfessoresBean.professorSelecionado.areasInteresse != null}">Contatado:</p:outputLabel>

									<p:selectBooleanButton id="btnContatado" onLabel="Sim"
										rendered="#{GrupoProfessoresBean.professorSelecionado.areasInteresse != null}"
										offLabel="Não" onIcon="ui-icon-check" offIcon="ui-icon-close"
										value="#{GrupoProfessoresBean.pretendido.contatado}">
									</p:selectBooleanButton>
								</p:panel>

								<p:panel header="Adicionar aos pretendidos"
									rendered="#{GrupoProfessoresBean.professorSelecionado.areasInteresse != null}">
									<p:commandButton value="Adicionar" icon="ui-icon-plus"
										actionListener="#{GrupoProfessoresBean.addProfessor}"
										update="lstProfessores, btnContatado, lstProfessoresDisponiveis, infoProfessor">
									</p:commandButton>
								</p:panel>

								<p:panel header="Nome"
									rendered="#{GrupoProfessoresBean.professorSelecionado != null}">
									<p:outputLabel>#{GrupoProfessoresBean.professorSelecionado.nome}</p:outputLabel>
								</p:panel>
								<p:dataTable var="area" emptyMessage=""
									rendered="#{GrupoProfessoresBean.professorSelecionado.areasInteresse != null}"
									value="#{GrupoProfessoresBean.professorSelecionado.areasInteresse}">
									<p:column
										headerText="Areas de Interesse (ordem de preferência)">
										<h:outputText value="#{area.nome}" />
									</p:column>
								</p:dataTable>
							</p:panel>
						</p:panel>
					</div>
				</div>
			</div>
		</h:form>
	</ui:define>
</ui:composition>

